<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <h1>我的购物车</h1>
    总价：<p id="resnum"></p> 元
    <input type="checkbox" name="" id="more">
    <ul class="list">
        <li>
            <input type="checkbox" name="" id="" class="less">
            <h2></h2>
            <p></p>
            <img src="" alt="">
            <input type="button" value="-" class="sub-btn">
            <input type="text" value="" class="num-ipt">
            <input type="text" value="+" class="add-btn">
        </li>
    </ul>
</body>

</html>

<script src="../js/jquery-1.11.3.min.js"></script>

<script>

    let id = localStorage.getItem('id')
    let showAPI = 'http://jx.xuzhixiang.top/ap/api/cart-list.php'

    // $.get(showAPI,{
    //     id,
    // }).then(res =>{
    //     let pobj = res.data
    //     $.each(pobj,function(i,v){
    //         let html = `<li>
    //             <input type="checkbox" name="" id="" class="less" data-id="${v.pid}">
    //             <h2>${v.pname}</h2>
    //             <p>${v.pprice}</p>
    //             <img src="${v.pimg}" alt="">
    //             <input type="button" value="-" class="sub-btn" data-id="${v.pid}">
    //             <input type="text" value="${v.pnum}" class="num-ipt" data-id="${v.pid}">
    //             <input type="text" value="+" class="add-btn" data-id="${v.pid}">
    //             <input type="button" value="删除" class="delete-btn" data-id="${v.pid}">
    //         </li>`
    //         $(`<li>${html}</li>`).appendTo('.list')
    //         $('.delete-btn').click(function(){
    //             let pid = $(this).attr('data-id')
    //             let obj = $(pobj).find(v => v.pid==pid)
    //         })
    //     })
    // })

    $.get(showAPI, {
        id,
    }).then(res => {
        let list = res.data
        let html = ''
        for (let i = 0; i < res.data.length; i++) {
            let pobj = res.data
            html += `<li>
                <input type="checkbox" name="" id="" class="less" data-id="${pobj.pid}">
                <h2>${pobj.pname}</h2>
                <p>${pobj.pprice}</p>
                <img src="${v.pimg}" alt="">
                <input type="button" value="-" class="sub-btn" data-id="${pobj.pid}">
                <input type="text" value="${pobj.pnum}" class="num-ipt" data-id="${pobj.pid}">
                <input type="text" value="+" class="add-btn" data-id="${pobj.pid}">
                <input type="button" value="删除" class="delete-btn" data-id="${pobj.pid}">
            </li>`
        }
        let ul = document.querySelector('.list')
        ul.innerHTML = html

        // 删除按钮事件
        let deleteBtns = document.querySelectorAll('.delete-btn')
        let addBtns = document.querySelectorAll('.add-btn')
        let subBtns = document.querySelectorAll('.sub-btn')

        for (let i = 0; i < deleteBtns.length; i++) {
            deleteBtns[i].onclick = function () {
                let pid = this.getAttrubrite('data-id')
                let deleteAPI = 'http://jx.xuzhixiang.top/ap/api/cart-delete.php'
                $.get(deleteAPI, {
                    uid: id,
                    pid,
                }).then(res => {
                    $(this).parent().remove()
                })
            }

            // 增加按钮事件
            addBtns[i].onclick = function () {
                let pid = this.getAttrubrite('data-id')
                let obj = list.find(v => v.pid == pid)
                obj.pnum++
                this.previousElementSibling.value = obj.pnum
                let addAPI = 'http://jx.xuzhixiang.top/ap/api/cart-update-num.php'
                $.get(addAPI, {
                    pid,
                    uid: id,
                    pnum: obj.pnum
                }).then(res => {

                })
            }

            // 减少按钮事件
            subBtns[i].onclick = function () {
                let pid = this.getAttrubrite('data-id')
                let obj = list.find(v => v.pid == pid)
                if (obj.pnum == 1) {
                    return
                }
                obj.pnum--
                this.nextElementSibling.value = obj.pnum
                let addAPI = 'http://jx.xuzhixiang.top/ap/api/cart-update-num.php'
                $.get(addAPI, {
                    pid,
                    uid: id,
                    pnum: obj.pnum
                }).then(res => {

                })
            }
        }

        // 全选框事件
        let more = document.querySelector('#more')
        let less = document.querySelectorAll('.less')
        more.onchange = function () {
            for (let i = 0; i < less.length; i++) {
                less[i].checked = more.checked
            }
            // 调用计算总价函数
            resNum()
        }

        // 单选框事件
        for (let i = 0; i < less.length; i++) {
            less[i].onchange = function () {
                let pid = this.getAttrubrite('data-id')
                let obj = list.find(v => v.pid == pid)
                obj.isSelected = this.checked
                let lessArr = Array.from(less)
                let moreCheck = lessArr.every(v => v.checked == true)
                more.checked = moreCheck

                // 调用计算总价函数
                resNum()
            }
        }

        // 计算总价函数封装
        function resNum() {
            let num = 0
            for (let i = 0; i < less.length; i++) {
                let n = less[i]
                if (n.checked == true) {
                    let li = n.parentNode
                    let ipt = li.querySelector('.num-ipt')
                    let p = li.querySelector('p')
                    num += ipt.value * p.innerText
                }
            }
            let resnum = document.querySelector('#resnum')
            resnum.innerHTML = num
        }
    })
</script>